<template>
	<view class="withdraw">
        <view class="content">
            <view class="title"> 当前余额：<text class="yj">{{info.nowVal}}</text> </view>
            <view class="con">
                <view class="con-tiltle"> 收款人姓名： </view>
                <input class="con-ipnut" type="text" v-model="applyForm.realname" placeholder="收款人姓名"/>
            </view>
			<view class="con">
			    <view class="con-tiltle"> 收款人电话： </view>
			    <input class="con-ipnut" type="text" v-model="applyForm.mobile" placeholder="收款人电话"/>
			</view>
			<view class="con">
			    <view class="con-tiltle"> 收款开户行： </view>
			    <input class="con-ipnut" type="text" v-model="applyForm.bank_name" placeholder="收款开户行"/>
			</view>
			<view class="con">
			    <view class="con-tiltle"> 收款卡号： </view>
			    <input class="con-ipnut" type="text" v-model="applyForm.account_number" placeholder="收款卡号"/>
			</view>
            <view class="con">
                <view class="con-tiltle"> 提现金额： </view>
                <input class="con-ipnut" type="number" v-model="applyForm.cash" placeholder="提现金额" style="width: 45%;"/>
                <view class="con-but" type="default" @click="turnAll()"> 全部余额 </view>
            </view>
			<view class="con" style="height: 160rpx;border-bottom: none;">
				<view class="con-tiltle">留言备注：</view>
				<textarea class="con-ipnut" type="text" v-model="applyForm.memo" placeholder="留言备注" style="height: 120rpx;"/>
			</view>
            <view class="con" v-if="info.remark != ''">{{info.remark}}</view>
            <view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
                <view class="but" @click="apply()">确认提现</view>
            </view>
        </view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				info: {
					nowVal: 0,
					remark: '',
				},
				applyForm: {
					bank_name: '',
					account_number: '',
					realname: '',
					mobile: '',
					cash: 0,
					memo: '',
				}
			}
		},
		methods: {
			getMain() {
				serve.request({
					url: '/member/withdraw/now',
					data: {},
				}).then(res => {
				    this.info.nowVal = res.data.nowVal;
				    this.info.remark = res.data.remark;
					this.applyForm.realname = res.data.realname;
					this.applyForm.mobile = res.data.mobile;
					this.applyForm.bank_name = res.data.bank_name;
					this.applyForm.account_number = res.data.account_number;
				});
			},
			turnAll() {
				this.applyForm.cash = this.info.nowVal;
			},
			apply(){
				if(this.applyForm.realname == '') {
					uni.showToast({
						title: "请填写提现收款人",
						icon: 'none'
					});
					return ;
				}
				if(this.applyForm.mobile == '') {
					uni.showToast({
						title: "请填写提现收款人电话",
						icon: 'none'
					});
					return ;
				}
				if(this.applyForm.bank_name == '') {
					uni.showToast({
						title: "请填写提现收款开户行",
						icon: 'none'
					});
					return ;
				}
				if(this.applyForm.account_number == '') {
					uni.showToast({
						title: "请填写提现收款卡号",
						icon: 'none'
					});
					return ;
				}
				if(this.applyForm.cash <= 0 || Number(this.applyForm.cash) > Number(this.info.nowVal)) {
					uni.showToast({
						title: "提现金额不能大于当前账号余额",
						icon: 'none'
					});
					return ;
				}
				serve.request({
					url: '/member/withdraw/apply',
					data: this.applyForm,
				}).then(res => {
					let resuleCode = res.code;
					uni.showToast({
						title: res.message,
						icon: 'none',
						success() {
							if(resuleCode == 200) {
								setTimeout(function() {
									common.jump('withdraw_list');
								}, 2000)
							}
						}
					});
				});
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 178;
			}
		},
		onShow() {
			this.getMain();
		},
		onPullDownRefresh() {
			this.getMain();
		},
	}
</script>

<style scoped>
	.withdraw {
		/* padding: 36rpx; */
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.content {
        padding: 0 36rpx;
    }
	.title{    line-height: 100rpx;
    border-bottom: 2rpx solid #ededed;}
	.yj{
		color: #dd6161;
	}
	
	.con{
		display: flex;
		position: relative;
		align-items: center;
		height: 100rpx;
		border-bottom: 2rpx solid #ededed;
	}
	.con-tiltle{
		text-align: right;
		width: 194rpx;
	}
	.con-ipnut{
		height: 40rpx;
		color: #dd6161;
		font-size: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 10rpx;
		padding: 8rpx;
		width: 60%;
	}
	.con-but{
		position: absolute;
		right: 0;
		font-size: 28rpx;
		color: #ffffff;
		padding: 8rpx 16rpx;
		background: #FFBC00;
		border-radius: 8rpx;
	}
	.common {
		box-sizing: border-box;
		padding: 37upx 30upx;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		align-items: flex-start;
		font-weight: bold;
		font-size: 28upx;
		color: rgba(60, 72, 104, 0.8);
	}
	.textarea {
		position: relative;
		z-index: 10;
		font-size: 28upx;
		margin-top: 34upx;
		padding: 24upx 28upx;
		height: 92upx;
		background: rgba(252, 252, 253, 1);
		border-radius: 12upx;
	}
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	
</style>
